<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="backText"></block>
			<block slot="content"><text>充值中心</text></block>
		</cu-custom>

		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="0==TabCur?'cur text-'+theme:''" @tap="tabSelect" :data-id="0">
					自助充值<text class="cuIcon-hot"></text>
				</view>
				<view class="cu-item flex-sub" :class="1==TabCur?'cur text-'+theme:''" @tap="tabSelect" :data-id="1">
					凭证充值
				</view>
			</view>
		</scroll-view>

		<view v-if="1==TabCur">
			<view class="bg-white margin radius overflow">
				<view class="cu-bar text-bold margin-lr solid-bottom">官方收款信息</view>
				<view class="margin-lr margin-tb-sm">户名：<text>{{receivables?receivables.name:''}}</text></view>
				<view class="margin-lr margin-tb-sm">账户：<text>{{receivables?receivables.bank_cark:''}}</text></view>
				<view class="margin-lr margin-tb-sm">开户行：<text>{{receivables?receivables.bank_name:''}}</text></view>
				<view class="margin-lr margin-top-sm margin-bottom text-center" @tap="modalName='Image'">
					<image :src="receivables?receivables['qr-code']:''" mode="widthFix" class="qrcode" style="width: 60%;"></image>
				</view>
			</view>
			<view class="margin-lr">
				<view class="cu-form-group">
					<view class="content text-bold">
						充值金额
					</view>
					<view class="action">
						<input placeholder="请输入充值金额" class="text-right" v-model="formData.number" type="number">
					</view>
				</view>
				<view class="cu-form-group solid-top">
					<textarea maxlength="-1" placeholder="备注" v-model="formData.remark"></textarea>
				</view>
				<ImageUploadView ref="ImageUploadView"></ImageUploadView>
			</view>
			<view class="padding-lr padding-tb-xs">
				<view class="text-gray text-xs padding-tb-xs">
					<text class="text-red text-xs">*</text>
					<text class="text-gray text-xs">上传需要2-3个工作日审核 请耐心等候</text>
				</view>
				<view class="text-gray text-xs">
					<text class="text-red text-xs">*</text>
					<text class="text-gray text-xs">上传小于2M图片</text>
				</view>
			</view>


			<view class="cu-bar tabbar shadow foot " :class="['bg-'+theme,loading?'light':'']">
				<view class="submit text-lg" v-if="loading">
					<text class="cuIcon-loading2 cuIconfont-spin"></text>
					提交中
				</view>
				<view class="submit text-lg" @tap="submitVoucher" v-else>
					提交
				</view>
			</view>
		</view>
		<view v-if="0==TabCur">
			<view class="cu-list menu margin-top">
				<view class="cu-item">
					<view class="content">当前余额</view>
					<view class="action"><text class="text-price text-red">{{member?member.account.user_money:'0'}}</text></view>
				</view>
			</view>
			<view class="margin-top bg-white">
				<view class="cu-bar padding-lr text-lg">请选择充值金额</view>
				<view class="cu-list grid col-3 no-border ">
					<view class="cu-item padding" v-for="(item,index) in rechargeList" :key="index">
						<view class="flex align-center margin-lr-sm cu-btn hauto radius" :class="selectMoney==index?'line-'+theme:'line-gray'"
						 @tap="selectMoney=index">
							<view class="text-price text-lg">
								{{item.price}}元
							</view>
						</view>
					</view>
					<view class="cu-item padding ">
						<view class="padding margin-lr-sm cu-btn hauto radius" :class="selectMoney==10?'line-'+theme:'line-gray'" @tap="selectMoney=10"
						 style="background-color: #F2F2F2 !important;">
							<input placeholder="其他金额" class="text-black" type="number" v-model="money" />
						</view>
					</view>
				</view>
			</view>
			<view class="margin-top bg-white padding-bottom">
				<view class="cu-bar padding-lr text-lg">请选择支付方式</view>
				<view class="cu-list menu">
					<view class="cu-item">
						<view class="cu-avatar bg-white">
							<image src="https://attract-1251028293.cos.ap-guangzhou.myqcloud.com/images/h5/icon-wechat.png" mode="aspectFit"></image>
						</view>
						<view class="content w100 margin-left-sm">
							<view>微信支付<text class="cu-tag bg-orange text-sm sm">推荐</text></view>
							<view class="text-gray text-sm">亿万用户的选择，更快更安全</view>
						</view>
						<view class="action">
							<view class="cuIcon cuIcon-roundcheck  default" :class="payment_code=='Wechat'?'text-'+theme:'text-gray'"></view>
						</view>
					</view>
				</view>
			</view>

			<view class="cu-bar tabbar shadow foot " :class="['bg-'+theme,loading?'light':'']">
				<view class="submit text-lg" v-if="loading">
					<text class="cuIcon-loading2 cuIconfont-spin"></text>
					充值中
				</view>
				<view class="submit text-lg" @tap="submitApply" v-else>
					立即充值
				</view>
			</view>
		</view>

		<Foot :value="''"></Foot>

		<view class="cu-modal" :class="modalName=='Image'?'show':''">
			<view class="cu-dialog">
				<image :src="receivables?receivables['qr-code']:''" class="w100" mode="widthFix" v-if="receivables"></image>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub  solid-left" @tap="modalName=''">关闭</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Foot from '@/components/default/foot.vue'
	import ImageUploadView from '@/components/default/ImageUploadView.vue'
	export default {
		components: {
			Foot,
			ImageUploadView,
		},
		data() {
			return {
				TabCur: 0,
				member: null,
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				rechargeList: null,
				selectMoney: 0,
				money: '',
				payment_code: 'Wechat',
				receivables: null,
				formData: {
					voucher: '',
					remark: '',
					number: 0,
				},
				modalName: '',
				loading: false,
			};
		},
		onLoad(options) {
			if (this.$common.loginAuth(true)) {
				this.$common.getMember().then((member) => {
					this.member = member
				})
				this.getRechargeConfig()
			}
			this.$common.getConfig().then((config) => {
				this.receivables = config.receivables
			})
		},
		onShow() {
			this.$common.loginAuth(true)
		},
		methods: {
			tabSelect(e) {
				if (this.TabCur != e.currentTarget.dataset.id) {
					this.TabCur = parseInt(e.currentTarget.dataset.id)
				}
			},
			getRechargeConfig() {
				this.$http
					.get('recharge_config')
					.then((response) => {
						this.rechargeList = response.data.data
					})
					.catch((response) => {})
			},
			submitApply() {
				let money = 0
				if (this.selectMoney == 10) {
					money = this.money
				} else money = this.rechargeList[this.selectMoney].price
				if (!money) {
					this.$common.showError('请输入正确的金额')
					return
				}
				if (this.loading) return
				this.loading = true
				this.$jwx.createPay('recharge', {
					money: money
				}).then((res) => {
					this.loading = false
					this.$common.rmCache('member')
					this.$common.getMember().then((member) => {
						this.member = member
					})
					this.$common.showSuccess('支付成功')
				}, (error) => {
					this.loading = false
				})
			},
			submitVoucher() {
				if (this.loading) return
				if (this.formData.number <= 0) {
					this.$common.showError('请输入正确的金额')
					return
				}
				this.$refs.ImageUploadView.getUploadList().then((res) => {
					if (!res || res.length == 0) {
						this.$common.showError('请上传图片')
						return
					}
					this.formData.voucher = JSON.stringify(res)
					uni.showLoading({
						title: '正在提交...'
					})
					this.loading = true
					this.$http
						.post('recharge', this.formData)
						.then((response) => {
							uni.hideLoading()
							this.$common.showSuccess('提交成功，请耐心等待审核', function() {
								uni.navigateTo({
									url: '/pages/member/index'
								})
							})
							uni.hideLoading()
						})
						.catch((response) => {
							uni.hideLoading()
							this.loading = false
							console.log(response)
						})
				})

			},
		}
	}
</script>

<style>
	.hauto {
		height: 140rpx;
	}

	.thumb {
		min-width: 80rpx;
		width: 80rpx;
		height: 80rpx;
	}

	.txbtn {
		min-width: 160rpx;
	}

	.loglg {
		right: 0;
		top: 30rpx;
		border-radius: 30rpx 0 0 30rpx;
	}
</style>
